<template>
  <div class="demo">
    <h3>搜索框</h3>
    <div class="search-bars">
      <div class="label">默认样式</div>
      <SearchBar @chose="chose"></SearchBar>
      <div class="label">自定义提示语</div>
      <SearchBar placeholder="如何一夜暴富" @chose="chose"></SearchBar>
      <div class="label">搜索按钮（右置 & 显示鼠标悬停反馈）</div>
      <SearchBar search-button-hover search-button-position="right" @chose="chose"></SearchBar>
      <div class="label">显示清除按钮</div>
      <SearchBar show-clear @chose="chose"></SearchBar>
      <div class="label">清除前询问</div>
      <SearchBar show-clear cofrim-before-clear @chose="chose"></SearchBar>
      <div class="label">懒加载提示</div>
      <SearchBar style="z-index: 2" show-clear :lazy-load="lazyload" @chose="chose"></SearchBar>
      <div class="label">自定义关键词高亮颜色</div>
      <SearchBar
        style="z-index: 1; --highlight-text-color: red"
        show-clear
        :lazy-load="lazyload"
        @chose="chose"
      >
      </SearchBar>
    </div>
  </div>
</template>
<script setup lang="ts">
import SearchBar from '@/components/b/SearchBar.vue'

const chose = (item: any) => {
  window.open('http://www.baidu.com')
}
const lazyload = (v: string, callback: (list: any[]) => void) => {
  setTimeout(() => {
    callback([
      { label: v },
      { label: v + '111' },
      { label: v },
      { label: v },
      { label: v },
      { label: v }
    ])
  }, 1000)
}
</script>
